
<template>
    <div class="result">
        <div class="result-header">
            <div class="title">
                <p>你是</p>
                <p class="title-type" v-for="(item,index) in opt.code" :key="index">
                    <span>{{item}}</span>
                </p>
                <p>型人</p>
            </div>

            <div class="desc">
                <p>{{opt.type.label}}</p>
                <!-- <p>{{opt.composite.content}}</p> -->
            </div>
        </div>
        <div class="result-desc">
            <!-- <p class="title">性格描述</p> -->
            <p style="text-align: center">
                测试结果得分最高
                <span class="title">{{opt.type.code}}</span>
            </p>
        </div>
        <div class="answer-result">
            <p>
                {{opt.type.character}}
            </p>
            <p>
                【职业建议】{{opt.type.advise}}
            </p>
            <p>
                【共同特点】{{opt.type.common}}
            </p>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            opt: {}
        }
    },
    created() {
        const key = window.sessionStorage.getItem('key')
        this.opt = JSON.parse(key)
    },
    methods: {
        getUrlParams() {
            var url = location.search;
            var theRequest = new Object();
            // console.log(url)
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                // str = str.substr(0, str.indexOf('/'))
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }
    }
}
</script>
<style lang="less" scoped>
.result {
  font-size: 0;
  .result-header {
    padding: 0.6rem;
    background-color: #819ce4;
    color: #ffffff;
    font-size: 0;
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      font-size: 0.38rem;
      margin: 0;
    }
    .title {
      display: flex;
      justify-content: space-around;
      .title-type {
        display: flex;
        flex-direction: column;
        span {
          width: 0.5rem;
          height: 0.5rem;
          //   padding-top: 0.05rem;
          background-color: #ffffff;
          border-radius: 50%;
          color: #000000;
          text-align: center;
        }
      }
    }
    .desc {
      font-size: 0.38rem;
      text-align: center;
      p {
        // width: 60%;
        margin: 0.1rem auto;
      }
      .desc-tag {
        font-size: 0.28rem;
        background-color: #4766a9;
        padding: 0.05rem 0.1rem;
        border-radius: 1rem;
      }
    }
  }
  .result-desc {
    font-size: 0.36rem;
    padding: 0 0.3rem;
    .title {
      background-color: #819ce4;
      color: #ffffff;
      width: 0.5rem;
      height: 0.5rem;
      //   padding-top: 0.05rem;
      display: inline-block;
      border-radius: 50%;
      text-align: center;
    }
  }
  .answer-result {
    font-size: 0.32rem;
    padding: 0.3rem;
  }
}
</style>
